<template>
  <div id="sideBar">
    <div class="logo"></div>
    <div class="menuList">
      <div
        class="menuSin"
        :class="activeMenu == index ? 'active' : ''"
        v-for="(item, index) in menuList"
        :key="index"
        @click="changeMenu(item, index)"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeMenu: 0,
      menuList: [
        {
          name: "首页",
          link: "/",
        },
        {
          name: "查询所有",
          link: "/queryAll",
        },
        {
          name: "按条件查询",
          link: "/queryBySome",
        },
        {
          name: "插入一条",
          link: "/addSome",
        },
        {
          name: "删除一条",
          link: "/deleteSome",
        },
        {
          name: "修改一条",
          link: "/updateSome",
        },
      ],
    };
  },
  mounted() {
    let currrentPath = this.$router.history.current.path;
    for (var key in this.menuList) {
      if (currrentPath == this.menuList[key].link) {
        this.activeMenu = key;
      }
    }
  },
  methods: {
    changeMenu(item, index) {
      this.$router.push({
        path: item.link,
      });
      this.activeMenu = index;
    },
  },
};
</script>
<style lang="less" scoped>
#sideBar {
  width: 100%;
  height: 100%;
  background: #515167;
  .logo {
    height: 50px;
  }
  .menuList {
    user-select: none;
    .menuSin {
      line-height: 50px;
      text-align: center;
      color: #eee;
      background: rgba(0, 0, 0, 0);
      transition: all 0.5s;
      cursor: pointer;
      &.active {
        color: #fff;
        background: rgba(0, 0, 0, 0.5);
      }
    }
  }
}
</style>